<template>
    <div class="table store sever_list">
        <div class="crumbs store_title">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> 券</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="mainBtn">
            <el-button type="success" @click="addStore()"><i class="el-icon-plus"></i>添加券</el-button>
        </div>
        <div class="container">
            <el-table :data="list"  border style="width: 100%"  ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column prop="name" label="券名称">
                </el-table-column>
                <el-table-column prop="buyLimit" label="购买限制" >
                </el-table-column>
                <el-table-column prop="currentPrice" label="金额（元）" >
                </el-table-column>
                <el-table-column prop="surplusAmount" label="库存" >
                </el-table-column>
                <el-table-column prop="fettle" label="状态" >
                </el-table-column>
                <el-table-column label="操作" align="center" width="260">
                    <template slot-scope="scope">
                        <el-button size="small"  @click="statusFn(scope.$index, scope.row)">设置状态</el-button>
                        <el-button size="small" type="primary" @click="editFn(scope.$index, scope.row)">修改</el-button>
                        <el-button size="small" type="primary" @click="bandFn(scope.$index, scope.row)">绑定</el-button>
                        <!--<el-button size="small" type="primary" @click="editFn(scope.$index, scope.row)">加库存</el-button>-->
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="total, prev, pager, next"
                    :total="pageNum"
                    :page-size="pageSize"
                    :current-page="cur_page">
                </el-pagination>
            </div>
        </div>

        <!-- 弹出框 -->
        <el-dialog :title="storeTitle" :visible.sync="addStoreDialog" width="600px">
            <el-form ref="form" :model="form"  label-width="120px">
                <el-form-item label="券名称：">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="上架：">
                    <el-radio-group v-model="status_show" @change="showStatus">
                        <el-radio-button label="否"></el-radio-button>
                        <el-radio-button label="是"></el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="显示类型：">
                    <el-radio-group v-model="showType_show" @change="showStype">
                        <el-radio-button label="正常"></el-radio-button>
                        <el-radio-button label="推荐"></el-radio-button>
                        <el-radio-button label="隐藏"></el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <!--第二期功能，暂时不做-->
                <!--<el-form-item label="可用项目：">
                    <el-input v-model="form.ticketDiscountsTypeEnum"></el-input>
                </el-form-item>-->
                <el-form-item label="购买限制：">
                    <el-input v-model="form.buyLimit"></el-input>
                </el-form-item>
                <el-form-item label="库存：">
                    <el-input v-model="form.surplusAmount"></el-input>
                </el-form-item>
                <el-form-item label="市场价：">
                    <el-input v-model="form.marketPrice"></el-input>
                </el-form-item>
                <el-form-item label="售价：">
                    <el-input v-model="form.currentPrice"></el-input>
                </el-form-item>
                <el-form-item label="返现设置：">
                    <el-radio-group v-model="radio3" @change="returnFlag">
                        <el-radio-button label="无"></el-radio-button>
                        <el-radio-button label="有"></el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <div v-show="returnTableFlag">
                    <el-form-item label="返现给上一级推荐人：">
                        <el-input v-model="form.oneStairReturnCash"></el-input>
                    </el-form-item>
                    <el-form-item label="返现给上二级推荐人：">
                        <el-input v-model="form.twoStairReturnCash"></el-input>
                    </el-form-item>
                </div>

                <el-form-item label="销售开始时间：">
                    <el-date-picker
                        v-model="form.sellStartTime"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="销售截止时间：">
                    <el-date-picker
                        v-model="form.sellEndTime"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="使用开始时间：">
                    <el-date-picker
                        v-model="form.useStartTime"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="使用截止时间：">
                    <el-date-picker
                        v-model="form.useEndTime"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="券简介：">
                    <el-input v-model="form.sketch"></el-input>
                </el-form-item>
                <el-form-item label="用券详情：">
                    <el-input type="textarea" :rows="6" v-model="form.details"></el-input>
                </el-form-item>
                <el-form-item label="缩略图：">
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        action=""
                        :on-change="onUploadChange"
                        :file-list="fileList"
                        list-type="picture"
                        :auto-upload="false"
                        :limit=1>
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="分享图：">
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        action=""
                        :on-change="onUploadChange2"
                        :file-list="fileList2"
                        list-type="picture"
                        :auto-upload="false"
                        :limit=1>
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <div v-show="returnTableFlag">
                    <el-form-item label="海报图：">
                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            action=""
                            :on-change="onUploadChange3"
                            :file-list="fileList3"
                            list-type="picture"
                            :auto-upload="false"
                            :limit=1>
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb，尺寸为1080*1920</div>
                        </el-upload>
                    </el-form-item>
                </div>
                <el-form-item label="主图：">
                    <div>
                        <el-button type="primary" @click="addupload" v-if="count<=2">添加文件</el-button>
                        <el-button type="primary" disabled="disabled" v-else>添加文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb，数量不超过3张</div>
                    </div>
                    <div class="upload_parent" v-for="(item, index) in datas_upload" :key="index">
                        <div class="defind_img_s">
                            <img :src="$ajaxBase + '/attachments/download?id=' + item.url" class="defind">
                            <el-upload
                                :ref='"upload" + index'
                                name="img_b"
                                class="upload-demo"
                                action=""
                                :on-change="onUploadChange4_1"
                                :on-remove='handleRemove'
                                :file-list='fileList4_1'
                                :show-file-list="false">
                                <div @click='getUploadTag(item, index)' class="up_btns">{{item.up_btn}}</div>
                            </el-upload>
                            <span class="upbtnGroups"
                                  @click="delupload(item,index)">删除</span>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="宝贝详情：">
                    <div>
                        <el-button type="primary" @click="adduploadTen" v-if="countTen<=9">添加文件</el-button>
                        <el-button type="primary" disabled="disabled" v-else>添加文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb，数量不超过10张</div>
                    </div>
                    <div class="upload_parent" v-for="(item, index) in datas_upload_Ten" :key="index">
                        <div class="defind_img_s">
                            <img :src="$ajaxBase + '/attachments/download?id=' + item.url" class="defind">
                            <el-upload
                                :ref='"upload" + index'
                                name="img_Ten"
                                class="upload-demo"
                                action=""
                                :on-change="onUploadChange5"
                                :on-remove='handleRemoveTen'
                                :file-list='fileList5'
                                :show-file-list="false">
                                <div @click='getUploadTagTen(item, index)' class="up_btns">{{item.up_btn}}</div>
                            </el-upload>
                            <span class="upbtnGroups"
                                  @click="deluploadTen(item,index)">删除</span>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addStoreDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit()">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 绑定门店 -->
        <el-dialog title="绑定门店" :visible.sync="bandStoreFlag" width="600px" center>

            <el-checkbox-group v-model="select_cate" @change="selectStatusFn" class="bindStore_box">
                <el-checkbox-button class="bandStore" v-for="store in storeList" :label="store.id" :key="store.id">{{store.shopName}}</el-checkbox-button>
            </el-checkbox-group>

            <el-tabs type="border-card" @tab-click="serviceItemFn($event)" v-if="ifServer" >
                <el-tab-pane v-for="item in serviceItem" :key="item.id"  class="itemList">
                    <span slot="label" :dataId="item.id">{{item.serviceItemGroupName}}</span>
                    <el-checkbox-group v-model="bandStore" @change="selectStoreFn">
                        <el-checkbox-button class="bandStore" v-for="store in serviceItem_list" :label="store.id" :key="store.id">{{store.name}}</el-checkbox-button>
                    </el-checkbox-group>
                </el-tab-pane>

            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="shelfFn()"><i class="el-icon-plus"></i>绑定</el-button>
                <el-button @click="bandStoreFlag = false">关 闭</el-button>
            </span>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        attachments,
        storeAsGet,
        storeAsPost,
        storeAsPut
    } from '../api/api';
    import {base64,tool_confirm} from '../tool/tool'
    export default {
        data() {
            return {
                storeTitle:'',
                select_cate:[],
                addStoreDialog:false,
                bandStoreFlag:false,
                selectStore:'',
                radio3:'无',
                storeArr:[],
                tableData: [],
                bandStore: [],
                ifEdit:false,
                ifServer:false,
                delVisible:false,
                returnTableFlag:false,
                cur_page: 0,
                pageSize: 10,
                orderId:null,
                storeId:null,
                pageNum: null,
                multipleSelection: [],
                is_search: false,
                serviceItem: null,
                serviceItemId: null,
                serviceItem_list: null,
                // 是否上架，是否推荐
                status_show: '否',
                showType_show: '正常',
                fileList: [],
                fileList2: [],
                fileList3: [],
                fileList4_1: [],
                // fileList4_2: [],
                // fileList4_3: [],
                fileList5: [],
                fileImg: '',
                fileImg2: '',
                fileImg3: '',
                fileImg4: '',
                fileImg5: '',
                trueForm:{
                },
                form: {
                    //券名称
                    name: '',
                    ticketTypeEnum: 'EXPERIENCE',
                    ticketDiscountsValue: 'CASH',
                    // 购买上限
                    buyLimit: '',
                    //返现值
                    oneStairReturnCash: '',
                    twoStairReturnCash: '',
                    //上架（下架）时间
                    sellStartTime: '',
                    sellEndTime: '',
                    //库存
                    surplusAmount: '',
                    //简述
                    sketch: '',
                    details: '',
                    //缩略图
                    breviaryImage:'',
                    //分享图
                    shareImage: '',
                    //海报图
                    posterImage: '',
                    //主图
                    ticketImage: '',
                    //宝贝详情
                    detailsImage: '',
                    showType: 'NORMAL',

                },
                form2: {
                    name: '',
                    ticketTypeEnum: 'EXPERIENCE',
                    ticketDiscountsValue: 'CASH',
                    buyLimit: '',
                    oneStairReturnCash: '',
                    twoStairReturnCash: '',
                    sellStartTime: '',
                    sellEndTime: '',
                    surplusAmount: '',
                    sketch: '',
                    details: '',
                    breviaryImage:'',
                    shareImage: '',
                    posterImage: '',
                    ticketImage: '',
                    detailsImage: '',
                    showType: 'NORMAL',
                },
                list:[],
                storeList:[],
                // 上传成功后的id
                uploadId: '',
                // 重新上传成功后的id
                resetUploadId: '',
                // upload控件tag
                uploadTag: 0,
                // 上传图片文件列表
                upItem: {},
                // 所有账号-select
                accVal: '1',
                // 图片上传框初始数组
                datas_upload: [{ up_btn: '上传图片', upbtnGroup: false, imgId: '', url: '' }],
                //  图片初始id数组
                imgArryid: [],
                count: 0,
                // 上传成功后的id
                uploadIdTen: '',
                // 重新上传成功后的id
                resetUploadIdTen: '',
                // upload控件tag
                uploadTagTen: 0,
                // 上传图片文件列表
                upItemTen: {},
                // 所有账号-select
                accValTen: '1',
                // 图片上传框初始数组
                datas_upload_Ten: [{ up_btn: '上传图片', upbtnGroup: false, imgId: '', url: '' }],
                //  图片初始id数组
                imgArryidTen: [],
                countTen: 0,
            }
        },
        created() {
            this.getStoreList();
            this.getServerItem();
        },
        computed: {
        },
        methods: {
            getStoreList(){
                storeAsGet('/ticket/all/page').then(res => {
                    console.log(res)
                    this.pageNum = res.data.content.page.totalElements;
                    this.list = res.data.content.page.content;
                    this.list.forEach((val)=>{
                        if(val.status === 'NORMAL'){
                            val.fettle = '在售'
                        }else{
                            val.fettle = '停售'
                        }
                    });
                });
                storeAsGet('/shop/all/page/status?page=0&size=10&status=NORMAL').then(res => {
                    this.storeList = res.data.content.page.content;
                });
            },
            onUploadChange(file) {//上传图片事件
                // console.log(file)
                let that = this;
                let base64Url = base64(file.url);
                base64Url.then(function(url){
                    let str = url.split(',');
                    that.fileImg = url.split(',')[1];
                    attachments(str[1]).then(res =>{
                        that.form.breviaryImage = res.data.content.imgId;
                    })
                })
            },
            onUploadChange2(file) {//上传图片事件
                // console.log(file)
                let that = this;
                let base64Url = base64(file.url);
                base64Url.then(function(url){
                    let str = url.split(',');
                    that.fileImg2 = url.split(',')[1];
                    attachments(str[1]).then(res =>{
                        that.form.shareImage = res.data.content.imgId;
                    })
                })
            },
            onUploadChange3(file) {//上传图片事件
                // console.log(file)
                let that = this;
                let base64Url = base64(file.url);
                base64Url.then(function(url){
                    let str = url.split(',');
                    that.fileImg3 = url.split(',')[1];
                    attachments(str[1]).then(res =>{
                        that.form.posterImage = res.data.content.imgId;
                    })
                })
            },
            //      点击“+”按钮生成图片上传框
            addupload() {
                this.datas_upload.push({ up_btn: '上传图片', upbtnGroup: false, imgId: '', url: '' });
                this.count = this.count + 1;
                // console.log(this.count,"this.count")
            },

            // 图片上传
            getUploadTag(item, index) {
                // console.log(item, index, 564)
                this.uploadTag = index
                this.upItem = item
            },
            onUploadChange4_1(file) {//上传图片事件
                // console.log(file.url,"file")
                let that = this;
                let base64Url = base64(file.url);
                base64Url.then(function(url){
                    let str = url.split(',');
                    that.fileImg4 = url.split(',')[1];
                    attachments(str[1]).then(res =>{
                        // console.log(res.data.content,"res")
                        that.datas_upload[that.uploadTag].imgId = res.data.content.imgId
                        that.uploadId = res.data.content.imgId

                        // var imgs = 'imgs' + this.uploadTag
                        that.upItem.url = res.data.content.imgId
                    })
                })
                that.upItem.up_btn = '重新上传图片';
                that.upItem.upbtnGroup = true;
            },
            uploadSuc(response, file, fileList) {
                // 把图片id添加到 uploadId 数据中
                // console.log(response, file, fileList,"333")
                this.datas_upload[this.uploadTag].imgId = response.id
                this.uploadId = response.id
                this.upItem.up_btn = '重新上传图片'
                this.upItem.upbtnGroup = true
                var imgs = 'imgs' + this.uploadTag
                this.upItem.url = response.id
            },
            handleRemove(file) {
                // console.log(file,'handleRemove')
            },
            //      上传图片-删除
            delupload(item, index) {
                // console.log(item, index,"item, index")
                // console.log(this.datas_upload,"before")
                for (var i = 0; i < this.datas_upload.length; i++) {
                    if (i != 0) {
                        if (index == i) {
                            if(this.datas_upload[index]){
                                this.datas_upload[index].imgId = '';
                                this.datas_upload[index].url = '';
                                this.datas_upload[index].up_btn = '重新上传图片';
                                this.datas_upload[index].upbtnGroup = true;
                            }
                            this.datas_upload.splice(i,1)
                            // console.log(this.datas_upload,"after")
                            this.count = this.count - 1;
                        }
                    } else if (i == 0) {
                        // console.log(index, item, 563)
                        this.datas_upload[index].imgId = ''
                        this.datas_upload[index].url = ''
                        item.up_btn = '上传图片'
                        item.upbtnGroup = false
                    }
                }
            },
            //      获取图片id
            getimgId() {
                // console.log(this.datas_upload,"this.datas_upload,530")
                this.imgArryid = [];
                for (var i = 0; i < this.datas_upload.length; i++) {
                    this.imgArryid.push(this.datas_upload[i].imgId)
                }
                // this.imgArryid = Array.from(new Set(this.imgArryid));
                this.form.ticketImage = this.imgArryid.join(",");
                return this.form.ticketImage;
            },
            // 重新上传-success
            resetUploadSuc(response, file, fileList) {
                this.resetUploadId = response.id
                this.conResUploadView = false
                this.conRessubmitView = true
            },
            //详情
            //      点击“+”按钮生成图片上传框
            adduploadTen() {
                this.datas_upload_Ten.push({ up_btn: '上传图片', upbtnGroup: false, imgId: '', url: '' });
                this.countTen = this.countTen + 1;
                // console.log(this.countTen,"this.countTen")
            },

            // 图片上传
            getUploadTagTen(item, index) {
                // console.log(item, index, 564)
                this.uploadTagTen = index
                this.upItemTen = item
            },
            onUploadChange5(file) {//上传图片事件
                // console.log(file)
                let that = this;
                let base64Url = base64(file.url);
                base64Url.then(function(url){
                    let str = url.split(',');
                    that.fileImg5 = url.split(',')[1];
                    attachments(str[1]).then(res =>{
                        // console.log(res.data.content.imgId,"imgID")
                        that.datas_upload_Ten[that.uploadTagTen].imgId = res.data.content.imgId
                        that.uploadIdTen = res.data.content.imgId

                        // var imgs = 'imgs' + this.uploadTag
                        that.upItemTen.url = res.data.content.imgId
                    })
                })
                that.upItemTen.up_btn = '重新上传图片';
                that.upItemTen.upbtnGroup = true;
            },
            uploadSucTen(response, file, fileList) {
                // 把图片id添加到 uploadId 数据中
                // console.log(response, file, fileList,"333")
                this.datas_upload_Ten[this.uploadTagTen].imgId = response.id
                this.uploadIdTen = response.id
                this.upItemTen.up_btn = '重新上传图片'
                this.upItemTen.upbtnGroup = true
                var imgs = 'imgs' + this.uploadTagTen
                this.upItemTen.url = response.id
            },
            handleRemoveTen(file) {
                // console.log(file,'handleRemove')
            },
            //      上传图片-删除
            deluploadTen(item, index) {
                // console.log(item, index,"item, index")
                console.log(this.datas_upload_Ten,"before")
                for (var i = 0; i < this.datas_upload_Ten.length; i++) {
                    if (i != 0) {
                        if (index == i) {
                            if(this.datas_upload_Ten[index]){
                                this.datas_upload_Ten[index].imgId = '';
                                this.datas_upload_Ten[index].url = '';
                                this.datas_upload_Ten[index].up_btn = '重新上传图片';
                                this.datas_upload_Ten[index].upbtnGroup = true;
                            }
                            this.datas_upload_Ten.splice(i,1)
                            console.log(this.datas_upload_Ten,"after")
                            this.countTen = this.countTen - 1;
                        }
                    } else if (i == 0) {
                        // console.log(index, item, 563)
                        this.datas_upload_Ten[index].imgId = ''
                        this.datas_upload_Ten[index].url = ''
                        item.up_btn = '上传图片'
                        item.upbtnGroup = false
                    }
                }
            },
            //      获取图片id
            getimgIdTen() {
                console.log(this.datas_upload_Ten,"this.datas_upload_Ten,618")
                this.imgArryidTen = [];
                for (var i = 0; i < this.datas_upload_Ten.length; i++) {
                    this.imgArryidTen.push(this.datas_upload_Ten[i].imgId)
                }
                // this.imgArryidTen = Array.from(new Set(this.imgArryidTen));
                console.log(this.imgArryidTen,"this.imgArryidTen")
                this.form.detailsImage = this.imgArryidTen.join(",");
                // console.log(this.form.detailsImage,"this.form.detailsImage")
                return this.form.detailsImage;
            },
            // 重新上传-success
            resetUploadSucTen(response, file, fileList) {
                this.resetUploadId = response.id
                this.conResUploadView = false
                this.conRessubmitView = true
            },
            editFn(e,val){//修改门店状态
                let that = this;
                this.ifEdit = 1;
                this.storeTitle='修改券';
                this.orderId = val.id;
                this.ifServer = 1;
                this.datas_upload = [];
                this.datas_upload_Ten = [];
                storeAsGet('/ticket/detail?ticketId='+val.id).then(res => {
                    console.log(res.data.content.ticketView,"edit")
                    if(res.data.content.ticketView.returnCashStatusEnum === 'YES'){
                        this.returnTableFlag = true;
                        this.radio3 = '有'
                    }else{
                        this.returnTableFlag = false;
                        this.radio3 = '无'
                    }
                    if(res.data.content.ticketView.showType == 'NORMAL'){
                        // this.returnTableFlag = true;
                        this.showType_show = '正常'
                    }else if(res.data.content.ticketView.showType == 'RECOMMEND'){
                        // this.returnTableFlag = false;
                        this.showType_show = '推荐'
                    }else{
                        // this.returnTableFlag = false;
                        this.showType_show = '隐藏'
                    }
                    if(res.data.content.ticketView.status == 'NORMAL'){
                        // this.returnTableFlag = true;
                        this.status_show = '是'
                    }else{
                        // this.returnTableFlag = false;
                        this.status_show = '否'
                    }
                    this.form = res.data.content.ticketView;
                    this.addStoreDialog = true;
                    this.fileList = [];
                    this.fileList2 = [];
                    this.fileList3 = [];
                    this.fileList4_1 = [];
                    this.fileList5 = [];
                    this.fileList[0] = {};
                    this.fileList2[0] = {};
                    this.fileList3[0] = {};
                    this.fileList[0].url = this.$ajaxBase + '/attachments/download?id=' + this.form.breviaryImage;
                    this.fileList2[0].url = this.$ajaxBase + '/attachments/download?id=' + this.form.shareImage;
                    this.fileList3[0].url = this.$ajaxBase + '/attachments/download?id=' + this.form.posterImage;
                    this.fileImg = this.form.breviaryImage;
                    this.fileImg2 = this.form.shareImage;
                    this.fileImg3 = this.form.posterImage;
                    // 多张，主图
                    let str = this.form.ticketImage.split(',');
                    // let str = this.form.ticketImage.split(',');
                    let newstr = [];
                    for(const i in str){
                        if(str[i] != ""){
                            newstr.push(str[i]);
                        }
                    }
                    for(const j in newstr){
                        // console.log(newstr[j])
                        this.fileList4_1[j] = {};
                    }
                    for(const q in newstr){
                        // this.fileList4_1[q].url = newstr[q];
                        if(newstr[q] != ''){
                            this.datas_upload.push({
                                up_btn: '重新上传图片',
                                upbtnGroup: true,
                                imgId: newstr[q],
                                url: newstr[q]
                            })
                        }
                        // console.log(this.datas_upload,this.datas_upload.length)
                        this.count = this.datas_upload.length;
                        // this.datas_upload[q].imgId = newstr[q];
                        // this.datas_upload[q].url = newstr[q];
                        // this.datas_upload[q].up_btn = '重新上传图片';
                        // this.datas_upload[q].upbtnGroup = true;
                        // console.log(this.datas_upload,q);
                    }
                    // this.fileImg4 = this.form.ticketImage;
                    // 详情图
                    let detaarr = this.form.detailsImage.split(',');
                    console.log(detaarr,"sstr");
                    let newdeta = [];
                    for(const m in detaarr){
                        if(detaarr[m] != ""){
                            newdeta.push(detaarr[m]);
                        }
                    }
                    for(const n in newdeta){
                        this.fileList5[n] = {};
                    }
                    for(const p in newdeta){
                        this.datas_upload_Ten.push({
                            up_btn: '重新上传图片',
                            upbtnGroup: true,
                            imgId: newdeta[p],
                            url: newdeta[p]
                        })
                    }
                    console.log(this.datas_upload_Ten,"newdeta")
                    // this.fileImg5 = this.form.detailsImage;
                });
            },
            saveEdit() {// 保存编辑
                this.getimgId();
                this.getimgIdTen();
                this.trueForm = {
                    name: this.form.name,
                    ticketDiscountsTypeEnum: 'CASH',
                    ticketTypeEnum: this.form.ticketTypeEnum,
                    ticketDiscountsValue: this.form.ticketDiscountsValue,
                    buyLimit: this.form.buyLimit,
                    currentPrice: this.form.currentPrice,
                    marketPrice: this.form.marketPrice,
                    returnCashStatusEnum: this.form.returnCashStatusEnum,
                    oneStairReturnCash: this.form.oneStairReturnCash,
                    twoStairReturnCash: this.form.twoStairReturnCash,
                    sellStartTime: this.form.sellStartTime,
                    sellEndTime: this.form.sellEndTime,
                    useStartTime: this.form.useStartTime,
                    useEndTime: this.form.useEndTime,
                    surplusAmount: this.form.surplusAmount,
                    // 缩略图
                    breviaryImage: this.form.breviaryImage,
                    shareImage: this.form.shareImage,
                    posterImage: this.form.posterImage,
                    ticketImage: this.form.ticketImage,
                    detailsImage: this.form.detailsImage,
                    status: this.form.status,
                    sketch: this.form.sketch,
                    details: this.form.details,
                    showType: this.form.showType,
                };
                if(this.ifEdit){
                    storeAsPut('/ticket/detail?ticketId='+this.orderId, this.trueForm).then(res=>{
                        this.getStoreList();
                        this.addStoreDialog = false;
                        this.$message.success(`修改成功`);
                        // location.reload()
                        // console.log(res)
                    });
                }else{
                    storeAsPost(this.trueForm,'/ticket/detail').then(res=>{
                        // console.log(res,22222)
                        // this.getStoreList(this.cur_page);
                        this.addStoreDialog = false;
                        this.$message.success(`添加成功`);
                    });
                }
            },
            statusFn(e,val){//修改券状态
                let status = val.status;
                tool_confirm(this,'是否要修改状态？').then(res => {
                    status === 'NORMAL' ?  status = 'DISABLED' : status = 'NORMAL';
                    storeAsPut('/ticket/status?ticketId='+val.id+'&status='+status+'').then(res => {
                        this.getStoreList()
                    })
                }).catch(() => {
                    // console.log('取消')
                });


            },
            // 改变是否上架状态
            showStatus(e){
                // console.log(e,"上架")
                if(e === '是'){
                    // this.returnTableFlag = true;
                    this.form.status = 'NORMAL'
                }else{
                    // this.returnTableFlag = false;
                    this.form.status = 'DISABLED'
                }
            },
            // 改变是否推荐状态
            showStype(e){
                if(e === '正常'){
                    // this.returnTableFlag = true;
                    this.form.showType = 'NORMAL'
                }else if(e === '推荐'){
                    // this.returnTableFlag = false;
                    this.form.showType = 'RECOMMEND'
                }else{
                    // this.returnTableFlag = false;
                    this.form.showType = 'DISABLED'
                }
                // console.log(this.form.showType,"推荐")

            },

            shelfFn(){//上下架按钮
                storeAsPost(this.select_cate,'/ticketShopRelation/multiple?ticketId='+ this.orderId).then(res=>{
                    // console.log(res,1122333)
                });
                storeAsPost(this.bandStore,'/ticketServiceItemRelation/multiple?ticketId='+ this.orderId).then(res=>{
                    // console.log(res,1122333)
                });
                this.$message.success(`绑定成功`);
                this.bandStoreFlag = false
            },
            selectStatusFn(data){
                // console.log(data)
                // this.orderId = data;

            },
            bandFn(e, val){//绑定门店
                this.bandStoreFlag = true;
                this.orderId = val.id;
                this.ifServer = 1;
                this.bandStore = [];
                let that = this;
                this.select_cate = [];
                storeAsGet('/ticketShopRelation/shop?ticketId='+this.orderId).then(res=>{
                    Array.prototype.slice.call(res.data.content.ticketShopRelationList).forEach((value, index)=>{
                        that.select_cate.push(value.shop.id)
                    })
                });
                this.getNowServer();
            },
            getNowServer(){//绑定服务
                this.bandStore = [];
                let that = this;
                storeAsGet('/ticketServiceItemRelation/serviceItem?ticketId='+this.orderId).then(res=>{
                    console.log(res)
                    Array.prototype.slice.call(res.data.content.ticketServiceItemRelationList).forEach((value, index)=>{
                        that.bandStore.push(value.serviceItem.id)
                    })
                })
            },
            selectStoreFn(arr){
                this.bandStore = arr;

            },
            returnFlag(e){
                if(e === '有'){
                    this.returnTableFlag = true;
                    this.form.returnCashStatusEnum = 'YES'
                }else{
                    this.returnTableFlag = false;
                    this.form.returnCashStatusEnum = 'NO'
                }

            },

            serviceItemFn(e){//获取当前项目下内容列表
                this.serviceItemId = e.$vnode.key;
                this.getServerInfoItem(this.serviceItemId)
            },
            getServerItem(){//获取服务栏目
                storeAsGet('serviceItem/group/all/status?direction=DESC&propertys=serviceItemGroupName&status=NORMAL').then(res =>{
                    this.serviceItem = res.data.content.list;
                    this.serviceItemId = this.serviceItem[0].id;
                    this.getServerInfoItem(this.serviceItem[0].id)
                })
            },
            getServerInfoItem(id){
                storeAsGet('serviceItem/group/status?groupId='+id+'&status=NORMAL').then(res=>{
                    this.serviceItem_list = res.data.content.list;
                });
                storeAsGet('shop/serviceItem/relation/shopId?shopId='+id).then(res=>{
                })
            },
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getStoreList(val-1)
            },
            addStore(){//添加门店
                this.ifEdit = 0;
                this.ifServer = 0;
                this.storeTitle='添加券';
                this.form = this.form2;
                this.fileList = [];
                this.fileList2 = [];
                this.fileList3 = [];
                this.fileList4_1 = [];
                this.fileList5 = [];
                this.addStoreDialog = true

            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val){
                console.log(val,111111)
            },
            formatterName(row, column, cellValue){

                console.log(cellValue)
            },

            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },

            // 确定删除
            deleteRow(){
                this.tableData.splice(this.idx, 1);
                this.$message.success('删除成功');
            }
        }
    }

</script>

<style>
    .store{
        position: relative;
    }
    .store .store_title{
        height: 40px;
    }
    .store .store_title div{
        line-height: 40px;
    }
    .store .mainBtn{
        position: absolute;
        right: 0;
        top:0

    }
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .bindStore_box{
        margin-bottom: 20px;
    }
    /*多张图片上传*/
    .upload_parent{
        width: 130px;
        height: 160px;
        margin-right: 5px;
        display: inline-block;
        margin-top: 20px;
        border:1px solid #ccc;
        position: relative;
    }
    .defind_img_s{
        width: 130px;
        height: 130px;
        overflow: hidden;
    }
    .defind{
        width: 130px;
    }
    .el-upload--text{
        width: 130px;
        border: 0px;
        border-top:1px solid #ccc;
        border-radius: 0;
        height: 30px;
        position: absolute;
        bottom: 0;
        color: #000;
    }
    .up_btns{
        width: 80px;
        height: 30px;
        font-size: 12px;
        border-right: 1px solid #ccc;
    }
    .upbtnGroups{
        display: inline-block;
        position: absolute;
        width: 50px;
        font-size: 12px;
        height: 30px;
        bottom: 0;
        text-align: center;
        cursor: pointer;
        right:0;
    }
</style>
